<template>
 <div>
     <city-header></city-header>
      
         <list :cities="cities" :hot="hotCities" :letter="letter"></list>
      <search :cities="cities"> </search> 
   <alphabet :cities="cities" @change="handleLetterChange"></alphabet>

 </div>
</template>

<script>
  import axios from 'axios'
  import CityHeader from './conponents/header'
  import search from './conponents/search'
  import list from './conponents/list'
  import alphabet from './conponents/alphabet'
  

 export default {
   data () {
     return {
       cities:{},
       letter:"",
       hotCities:[]

     }
   },
   components: {
      CityHeader ,
      search ,
      list,
      alphabet
   },
   methods :{
    getCityInfo(){
      axios.get('/api/city.json').then(this.handleGetCityInfoSucc)
    },
    handleGetCityInfoSucc(res){
      if(res.data.ret&&res.data.data){
          this.cities= res.data.data.cities
          this.hotCities= res.data.data.hotCities
      }
    }, 
    handleLetterChange(letter){
     this.letter = letter
     }
   },
   mounted  () {
     this.getCityInfo()
   },

  
 }
</script>

<style lang="stylus" scoped> 

 
</style>
